<template>
  <div class="news">

      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list @load="onUpPull" v-model="loading" :finished="finished" finished-text="没有更多了" :offset=10>
            <van-cell v-for="(item,index) in news" :key="index">
              <router-link :to="{name:'news.desc',query:{id:index}}">
                <van-card
                  :desc="item.desc"
                  :title="item.name"
                  :thumb="item.img"
                />
              </router-link>
            </van-cell>
          </van-list>
      </van-pull-refresh>
    </div>


</template>

<script>
    import { Card,PullRefresh,Toast,List,Cell } from 'vant';

    export default {
        name: "News",
        components:{
            [Card.name]:Card,
            [PullRefresh.name]:PullRefresh,
            [Toast.name]:Toast,
            [List.name]:List,
            [Cell.name]:Cell,
        },
        data(){
            return {
                //下拉刷新参数
                isLoading: false,   //是否处于下拉刷新状态

                //上拉加载参数
                loading: false,   //是否处于加载状态
                finished:false, //是否加载完成
                i:1,
                news:[],
            }
        },
        methods:{
            onRefresh() {       //下拉刷新
                this.loading = false;
                setTimeout(() => {
                    this.isLoading = false;

                    Toast('加载完成')
                }, 500);
            },
            //请注意 进入页面第一次就会加载此数据
            onUpPull(){
                setTimeout(() => {
                        this.news = this.news.concat([
                            {
                                name: '新闻1',
                                desc: '新闻1的描述',
                                title: '新闻1的标题',
                                img:'https://img.yzcdn.cn/vant/t-thirt.jpg',
                            },
                            {
                                name: '新闻1',
                                desc: '新闻1的描述',
                                title: '新闻1的标题',
                                img:'https://img.yzcdn.cn/vant/t-thirt.jpg',
                            },
                            {
                                name: '新闻1',
                                desc: '新闻1的描述',
                                title: '新闻1的标题',
                                img:'https://img.yzcdn.cn/vant/t-thirt.jpg',
                            },
                            {
                                name: '新闻1',
                                desc: '新闻1的描述',
                                title: '新闻1的标题',
                                img:'https://img.yzcdn.cn/vant/t-thirt.jpg',
                            },
                            {
                                name: '新闻1',
                                desc: '新闻1的描述',
                                title: '新闻1的标题',
                                img:'https://img.yzcdn.cn/vant/t-thirt.jpg',
                            },
                            {
                                name: '新闻1',
                                desc: '新闻1的描述',
                                title: '新闻1的标题',
                                img:'https://img.yzcdn.cn/vant/t-thirt.jpg',
                            }
                        ])
                    this.loading = false
                    this.i += 1
                    if(this.i == 10) {
                        this.finished = true
                    }
                    console.log(this.i)
                }, 500);
            }
        }
    }
</script>

<style scoped>

</style>
